<template>
	<view class="goods-page">
		<u-navbar autoBack bgColor="transparent">
			<view slot="left" class="navbar-title">
				<u-icon name="arrow-left" color="#fff" size="34rpx"></u-icon>
			</view>
		</u-navbar>
		
		<view class="top-box">
			<image class="bg" src="@/static/index-3.jpg" mode="aspectFill"></image>
			<view class="box">
				<image class="image" :src="config.index_img_3" mode="aspectFill"></image>
				<view class="mask">57686人已加入联盟</view>
			</view>
		</view>
		<view class="list-box">
			<view class="item" v-for="(item, index) in goodsList" :key="index" @click="goDetail(item.skuInfo.spu)">
				<image class="image" :src="item.img_path" mode="aspectFill"></image>
				<view class="content">
					<view class="title u-line-1">{{ item.name }}</view>
					<view class="bottom">
						<view class="price">￥{{ item.price }}</view>
						<button class="btn" size="mini">我要加入</button>
					</view>
				</view>
			</view>
		</view>
		
		<view class="service-btn" @click="serviceShow = true">
			<image class="icon" src="@/static/icon-2.png" mode="aspectFill"></image>
			<view class="text">客服</view>
		</view>
		
		<u-popup :show="serviceShow" round="28rpx" mode="center" closeable :safeAreaInsetBottom="false" @close="serviceShow = false">
			<view class="service-popup">
				<view class="title">请添加专属数字人导师</view>
				<view class="qrcode-box">
					<image class="qrcode" :src="config.kefu_img" show-menu-by-longpress></image>
				</view>
				<view class="tips">长按识别二维码</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getConfig, getGoodsList } from '@/api/api.js'

	export default {
		data () {
			return {
				serviceShow: false,
				
				config: {},
				
				goodsList: [],
				
				/* 分页 */
				status: 'loadmore',
				page: 0,
				last_page: 1,
			}
		},
		onLoad () {
			getConfig().then(res => {
				if (res) {
					this.config = res.data
				}
			})
			
			this.loadData()
		},
		onReachBottom () {
			this.getListData()
		},
		methods: {
			loadData () {
				this.page = 0
				this.last_page = 1
				this.goodsList = []
				this.getListData()
			},
			async getListData () {
				if(this.page >= this.last_page) return
			
				this.status = 'loading'
				this.page = ++this.page
			
				const goodsReq = await getGoodsList({
					page: this.page,
					page_size: 10,
					filters: {
						goods_type: 1
					}
				})
				
				if (goodsReq) {
					this.goodsList = this.goodsList.concat(goodsReq.data.data)
					this.last_page = goodsReq.data.last_page
					
					if (this.page >= this.last_page) {
						this.status = 'nomore'
					} else {
						this.status = 'loading'
					}
					
					return ''
				}
			},
			goDetail (spu) {
				uni.navigateTo({
					url: '/pages/index/detail?spu=' + spu
				})
			}
		}
	}
</script>

<style lang="scss">
.goods-page {
	min-height: 100%;
	background-color: #030395;
	.navbar-title {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.top-box {
		position: relative;
		.bg {
			width: 750rpx;
			height: 752rpx;
		}
		.box {
			position: absolute;
			top: 195rpx;
			left: 55rpx;
			right: 54rpx;
			bottom: 76rpx;
			border-radius: 16rpx;
			overflow: hidden;
			.image {
				width: 100%;
				height: 100%;
			}
			.mask {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 2;
				height: 70rpx;
				color: #ffd849;
				font-size: 28rpx;
				text-align: center;
				line-height: 70rpx;
				background-color: rgba(0, 0, 0, 0.5);
			}
		}
	}
	.list-box {
		padding: 30rpx;
		.item {
			padding: 24rpx;
			border-radius: 16rpx;
			background-color: #1b1fae;
			display: flex;
			&:not(:last-child) {
				margin-bottom: 20rpx;
			}
			.image {
				width: 240rpx;
				height: 240rpx;
				border-radius: 16rpx;
			}
			.content {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				.title {
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
				}
				.bottom {
					margin-top: auto;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.price {
						color: #9bfb4e;
						font-size: 30rpx;
						font-weight: bold;
					}
					.btn {
						margin: 0;
						padding: 0;
						width: 214rpx;
						height: 76rpx;
						border-radius: 76rpx;
						color: #3f3307;
						font-size: 32rpx;
						font-weight: bold;
						background-color: #ffd849;
					}
				}
			}
		}
	}
	.service-btn {
		position: fixed;
		bottom: 334rpx;
		right: 16rpx;
		z-index: 10;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: linear-gradient(-90deg, #28c367, #17b48d);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.icon {
			width: 40rpx;
			height: 40rpx;
			animation: scale infinite 1s;
		}
		.text {
			margin-top: 4rpx;
			color: #fff;
			font-size: 20rpx;
		}
	}
	
	@keyframes scale {
		0% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.2);
		}
		100% {
			transform: scale(1);
		}
	}
	
	.service-popup {
		width: 630rpx;
		border-radius: 28rpx;
		padding: 80rpx 0 86rpx;
		background: linear-gradient(0deg, #17b48d, #2751e3);
		color: #fff;
		text-align: center;
		.title {
			font-size: 48rpx;
			font-weight: bold;
		}
		.qrcode-box {
			margin: 40rpx auto 26rpx;
			width: 426rpx;
			height: 426rpx;
			border-radius: 16rpx;
			text-align: center;
			line-height: 426rpx;
			background-color: #fff;
			.qrcode {
				width: 360rpx;
				height: 360rpx;
			}
		}
		.tips {
			font-size: 26rpx;
		}
	}
	
	::v-deep {
		.u-popup .icon--u-icon {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			border: 1rpx solid rgba(255, 255, 255, 0.8);
			background-color: rgba(255, 255, 255, 0.2);
			display: flex !important;
			justify-content: center;
			.u-icon__icon {
				font-size: 20rpx !important;
				color: rgba(255, 255, 255, 0.8) !important;
			}
		}
	}
}
</style>
